<template>
	<!--  排行榜-->
	<page-body>
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center ranking_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub ranking_fd0_0'>
					<view class='flex flex-wrap align-center ranking_fd0_0_c0'>
						<text class='fu-iconfont2  ranking_fd0_0_c0_c0' @tap.stop="handleJumpDiy" data-type="back"
							data-url="1">&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text class='ranking_fd0_0_c1_c0'>{{$t('排行榜')}}</text>
					</view>
					<view class='flex flex-wrap align-center justify-end ranking_fd0_0_c0'>
						<!-- <image class='ranking_fd0_0_c2_c0' mode="aspectFit" :src='STATIC_URL+"1622.png"'
							@tap.stop=showPop></image> -->
					</view>
				</view>
			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout ranking_flex_1">
			<!-- 	<view class='flex flex-wrap align-center justify-center ranking_fd1_0'>
					<view>
						<benben-flex-tabs class-name='ranking_benbenTabsfd1_0_c0_99' v-model="tabsVal"
							ref="benben_tabsfd1_0_c0" select-mark="benben_tabsfd1_0_c0" key="benben_tabsfd1_0_c0"
							:open-title-type='false' :open-sticky='true' :top='0' :is-show-content='false'
							:scrollspy='false' :tabs-info.sync="tabsInfofd1_0_c0" @change="tabsChangeFunc()">

							<scroll-view @scroll="tabsInfofd1_0_c0.scrollX = $event.detail.scrollLeft"
								id="benben_tabsfd1_0_c0" class="benben-tabs"
								style="width:750rpx ; background-color:#fff; height:88rpx;border-radius: 44rpx; display: flex; align-items: center;"
								:scroll-x="true" :scroll-left="tabsInfofd1_0_c0.moveX"
								scroll-with-animation="all .3s ease">
								<view class="benben-tabs-content" id="benben_tabsfd1_0_c0-content">
									<view id="benben_tabsfd1_0_c0-title"
										class="benben-tabs-title flex flex align-center justify-around">
										<template v-for='(item,key0) in tabs'>
											<view :key='key0' style="margin-top: 13rpx;"
												:class="{ 'checkTitlefd1_0_c0': tabsVal == item.value, 'flex flex-wrap align-center ranking_titlefd1_0_c0_c3': true }"
												@tap="tabsVal = item.value"
												:id="`benben_tabsfd1_0_c0-title-item-${item.value}`">

												<text class='ranking_titleItemfd1_0_c0_c3_c0'>{{item.name}}</text>

											</view>
										</template>
									</view>
									<view
										:style="{ left: tabsInfofd1_0_c0.lineleft, maxWidth: tabsInfofd1_0_c0.lineWidth ,}"
										id="benben_tabsfd1_0_c0-line"
										class="benben-tabs-line flex benben-flex-tabs-line ranking_linefd1_0_c0"
										:class="{'benben-tabs-line-active':tabsInfofd1_0_c0.isInit}"></view>
								</view>
							</scroll-view>

						</benben-flex-tabs>

					</view>
				</view> -->
				<view class='flex flex-wrap align-end justify-between ranking_fd1_1'>
					<view class='flex flex-direction align-center ranking_fd1_1_c0' >
						<view class='flex flex-wrap align-center justify-center ranking_fd1_1_c0_c0'>
							<image class='ranking_fd1_1_c0_c0_c0' mode="aspectFill" :src='STATIC_URL+"1626.png"'>
							</image>
							<image class='ranking_fd1_1_c0_c0_c1' mode="aspectFill" v-if="signin[1]" :src='signin[1].user_avatar?signin[1].user_avatar:STATIC_URL+"LOGO.png"'></image>
							<image class='ranking_fd1_1_c0_c0_c1' mode="aspectFill" v-else :src='STATIC_URL+"1672.png"'></image>
						</view>
						<view class="none" v-if="!signin[1]">虚位以待</view>
						<text class='ranking_fd1_1_c0_c1' v-if="signin[1]">{{signin[1].user_real_name}}</text>
						<image class='ranking_fd1_1_c0_c2' v-if="signin[1]" style="width: 97rpx;height: 26rpx" mode="aspectFill" :src='STATIC_URL+"1627.png"'></image>
						<view class='flex flex-direction flex-wrap align-center justify-center' v-if="signin[1]">
							<text class='ranking_fd1_1_c0_c3_c0' >{{signin[1].score}}</text>
						</view>
					</view>
					<view class='flex flex-direction align-center ranking_fd1_1_c1'>
						<view class='flex flex-wrap align-center justify-center ranking_fd1_1_c1_c0'>
							<image class='ranking_fd1_1_c1_c0_c0' mode="aspectFill" :src='STATIC_URL+"1630.png"'>
							</image>
							<image class='ranking_fd1_1_c0_c0_c1' mode="aspectFill" v-if="signin[0]" :src='signin[0].user_avatar?signin[0].user_avatar:STATIC_URL+"LOGO.png"'></image>
							<image class='ranking_fd1_1_c0_c0_c1' mode="aspectFill" v-else :src='STATIC_URL+"1672.png"'></image>
						</view>
						<text class='ranking_fd1_1_c1_c1' v-if="signin[0]">{{signin[0].user_real_name}}</text>
						<image class='ranking_fd1_1_c0_c2' mode="aspectFill" :src='STATIC_URL+"1631.png"'></image>
						<view class='flex flex-direction flex-wrap align-center justify-center'>
							<text class='ranking_fd1_1_c1_c3_c0' v-if="signin[0]">{{signin[0].score}}</text>
						</view>
					</view>
					<view class='flex flex-direction align-center ranking_fd1_1_c2'>
						<view class='flex flex-wrap align-center justify-center ranking_fd1_1_c0_c0'>
							<image class='ranking_fd1_1_c0_c0_c0' mode="aspectFill" :src='STATIC_URL+"1628.png"'>
							</image>
							<!-- <image  class='ranking_fd1_1_c0_c0_c1' mode="aspectFill" :src='signin[2]?signin[2].user_avatar:STATIC_URL+"1672.png"'></image> -->
							<image class='ranking_fd1_1_c0_c0_c1' mode="aspectFill" v-if="signin[2]" :src='signin[2].user_avatar?signin[2].user_avatar:STATIC_URL+"LOGO.png"'></image>
							<image class='ranking_fd1_1_c0_c0_c1' mode="aspectFill" v-else :src='STATIC_URL+"1672.png"'></image>
						</view>
						<view class="none" v-if="!signin[2]">虚位以待</view>
						<text class='ranking_fd1_1_c0_c1'  v-if="signin[2]" >{{signin[2].user_real_name}}</text>
						<image class='ranking_fd1_1_c0_c2'  v-if="signin[2]"  style="width: 97rpx;height: 26rpx" mode="aspectFill" :src='STATIC_URL+"1629.png"'></image>
						<view class='flex flex-direction flex-wrap align-center justify-center'>
							<text class='ranking_fd1_1_c2_c3_c0' v-if="signin[2]">{{signin[2].score}}</text>
						</view>
					</view>
					<!-- <view v-else style="width: 213rpx;"></view> -->
				</view>



			</view>

			<!---flex布局flex布局结束-->
			<!---flex布局flex布局开始-->
			<view class=" ranking_flex_2" v-if="interaction.length>3">
				<view class='flex flex-wrap align-center justify-between ranking_fd2_0'>
					<text class='ranking_fd2_0_c0'>{{$t('排名')}}</text>
					<text class='ranking_fd2_0_c0'>{{$t('名称')}}</text>
					<text class='ranking_fd2_0_c2'>得分</text>
				</view>
				<view class='ranking_fd2_1' >
					<view class='flex flex-wrap align-center justify-between ranking_fd2_1_c0'
						v-for="item in interaction" :key="item.id">
						<view class='flex flex-wrap align-center'>
							<text class='ranking_fd2_1_c0_c0_c0'
								:class="item.id == userid?'ranking_fd2_1_c1_c0_000':''">{{+item.index < 10 ? '0'+item.index :item.index }}</text>
							<image class='ranking_fd2_1_c0_c0_c1' mode="aspectFill" 
								:src='item.user_avatar?item.user_avatar:STATIC_URL+"LOGO.png"'></image>
							<text class='ranking_fd2_1_c0_c0_c2'>{{item.user_real_name}}</text>
						</view>
						<view class='flex flex-wrap align-center'>
							<text class='ranking_fd2_1_c0_c1_c1'>{{item.attendance_count}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="ranking_flex_2  " v-if="interaction.length<=3" :style="{height: (88+500)+'rpx'}" >
				<view class="flex flex-wrap align-center nones">
					<view class="xian"></view> 暂无更多数据 <view class="xian"></view>
				</view>
			</view>

			<!---本人-->
			<view class="flex flex-wrap align-start benben-position-layout flex ranking_flex_3"
				:style="{height:(160+bottomSafeAreaRpx)+'rpx',paddingBottom:bottomSafeAreaRpx+'rpx',bottom: (88+bottomSafeAreaRpx)+'rpx' }"
				v-if="tabsVal==1||tabsVal==2">
				<view class='flex flex-wrap align-center flex-sub ranking_fd3_0'>
					<view class='flex flex-wrap align-center justify-between ranking_fd3_0_c0'>
						<view class='flex flex-wrap align-center'>
							<text class='ranking_fd3_0_c0_c0_c0'>{{userInfo.rank}}</text>
							<image class='ranking_fd3_0_c0_c0_c1' mode="aspectFill" 
								:src='userInfo.avatar?userInfo.avatar:STATIC_URL+"LOGO.png"' ></image>
							<text class='ranking_fd3_0_c0_c0_c2 hid1'>{{userInfo.real_name}}</text>
						</view>
						<view class='flex flex-wrap align-center'>
							<view class='flex flex-wrap align-center ranking_fd3_0_c0_c1_c0'>
								<text class='ranking_fd3_0_c0_c1_c0_c0'>{{$t('第')}}</text>
								<text class='ranking_fd3_0_c0_c1_c0_c0'>{{userInfo.rank}}</text>
								<text class='ranking_fd3_0_c0_c1_c0_c0'>{{$t('名')}}</text>
							</view>
							<text class='ranking_fd3_0_c0_c1_c1'>{{userInfo.score}}</text>
							<text class='ranking_fd3_0_c0_c1_c2'>{{$t('分')}}</text>
						</view>
					</view>
				</view>

			</view>
			<view :style="{height: (160+bottomSafeAreaRpx)+'rpx'}"></view>
			<benben-popup v-model="popupShow1728455694729" :mask="true" :mask-close-able="true" mode='bottom'
				:z-index='9999'>
				<!---flex布局flex布局开始-->
				<view class="flex benben-flex-layout flex-wrap align-center ranking_flex_4">
					<view class='flex flex-wrap align-center justify-between ranking_fd4_0'>
						<text class='ranking_fd4_0_c0' @tap.stop="popupShow1728455694729=false">{{$t('取消')}}</text>
						<text class='ranking_fd4_0_c1'>{{$t('日期选择')}}</text>
						<text class='ranking_fd4_0_c2' @tap.stop=submit>{{$t('确定')}}</text> 
					</view>
					<benben-calendar-diy @change="change" mode='range' year-arrow-color='#666666'
						month-arrow-color='#666666' start-text=' ' end-text=' ' :change-title='true' :change-year='true'
						:change-month='true' class=" ranking_fd4_1"></benben-calendar-diy>
				</view>
			</benben-popup>


		</view>
	</page-body>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'

	export default {
		components: {},


		data() {
			return {
				"popupShow1728455694729": false,
				"tabsInfofd1_0_c0": {
					lineleft: '',
					lineWidth: '',
					moveX: 0,
					scrollX: 0,
					PageScrollX: 0,
					isInit: false
				},
				"tabs": [{
					"name": "课堂签到",
					"value": "1",
					"image": ""
				}, {
					"name": "课堂互动",
					"value": "2",
					"image": ""
				}, {
					"name": "综合提升",
					"value": "3",
					"image": ""
				}],
				"tabsVal": "1",
				"tabsLab": "",
				"signin": [],
				"interaction": [],
				userid: null,
				userInfo: {
					
				},
				params: {
					start_time: '',
					end_time: ''
				},
				aid:'',
			};
		},
		computed: {

		},
		watch: {},
		onLoad(options) {
			this.aid=options.aid
			this.getvh70e09a2eb6d8Func()
			// this.getvh70e09a2eb6d8Func()
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {
			// this.userid = uni.getStorageSync("USER_INFO").id
			// this.getvh70e09a2eb6d8Func()
		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			showPop() {
				this.popupShow1728455694729 = true
				this.params.end_time = ''
				this.params.start_time = ''
			},
			change(val) {
				this.params.end_time = val.end
				this.params.start_time = val.start
			},
			submit() {
				this.popupShow1728455694729 = false
				this.getvh70e09a2eb6d8Func()
			},
			//APP接口-获取班级学生本周签到排行榜
			async getvh70e09a2eb6d8Func() {
				//请求方法
				//数据验证
				let datasignin = await this.$api.get(global.apiUrls.post68d36ce070e9e, {
						
					homeworkreleaserecord_id:this.aid
				});

				if (datasignin.data.code != 1) {
					this.$message.info(datasignin.data.msg);
					return
				}
				let infosignin = datasignin.data;
				let arr = [];
				let that = this
				arr = infosignin.data.list
				arr.forEach((item, index) => { 
					console.log(item)
					item.index = index + 1
					item.attendance_count = item.attendance_count
					// if (item.id == that.userid) {
					// 	that.userInfo = item
					// }
				})
				that.userInfo=infosignin.data.my_info
				console.log(arr)
				console.log(this.userInfo)
				if(arr.length<3){
					this.signin = arr
				}else{
					this.signin = arr.slice(0, 3); // 从索引0开始，到索引3（不包括3）
					this.interaction = arr.slice(3);
				}
				
				

			},
			//APP接口-获取学生本周课堂互动排行榜
			async getjh70e15b835941Func() {
				let datainteraction = await this.$api.get(global.apiUrls.post670e15b835941, this.params);
				if (datainteraction.data.code != 1) {
					this.$message.info(datainteraction.data.msg);
					return
				}
				let infointeraction = datainteraction.data;
				this.signin = infointeraction.data
				let arr = [];
				let that = this
				arr = infointeraction.data
				arr.forEach((item, index) => {
					item.index = index + 1
					item.attendance_count = item.total
					if (item.id == that.userid) {
						that.userInfo = item
					}
				})
				// this.signin = arr.slice(0, 3); // 从索引0开始，到索引3（不包括3）
				// this.interaction = arr.slice(3);

			},
			//11
			tabsChangeFunc() {
				this.params.end_time = ''
				this.params.start_time = ''
				if (this.tabsVal == '1') {
					this.getvh70e09a2eb6d8Func()
				} else if (this.tabsVal == '2') {
					this.getjh70e15b835941Func()
				} else {

				}
			}
		}
	};
</script>
<style lang="scss">
	::v-deep .page .ranking_benbenTabsfd1_0_c0_99 {
		background: #fff !important;
		width: 640rpx;
		height: 88rpx;
		white-space: nowrap;
		text-align: center;
		border-radius: 44rpx;
	}
</style>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: url(image-path('1621.png')) no-repeat;
		background-size: 100% auto;
		position: relative;
	}

	.ranking_flex_0 {
		// background: none;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 99;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.ranking_fd0_0_c2_c0 {
		width: 40rpx;
		height: 40rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.ranking_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 700;
		color: #333333;
		line-height: 50rpx;
	}

	.ranking_fd0_0_c0_c0 {
		font-size: 36rpx;
		color: #333;
	}

	.ranking_fd0_0_c0 {
		width: 120rpx;
	}

	.ranking_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		position: relative;
	}

	.ranking_flex_1 {
		padding: 24rpx 0 24rpx 0;
		// background-color: #145EFD;
		position: fixed;
		width: 100%;
		top: cacl(88 + StatusBarRpx)rpx;
		z-index: 1;
	}

	.ranking_fd1_1_c2_c3_c0 {
		font-size: 31rpx;
		color: rgba(123, 56, 0, 1);
		font-weight: 700;
		line-height: 36rpx;
	}

	.ranking_fd1_1_c2 {
		background: url(image-path('1625.png')) no-repeat;
		background-size: 100% auto;
		height: 236rpx;
		width: 213rpx;
	}

	.ranking_fd1_1_c1_c3_c1 {
		color: rgba(123, 56, 0, 1);
		font-size: 16rpx;
		font-weight: 400;
		line-height: 22rpx;
	}

	.ranking_fd1_1_c1_c3_c0 {
		font-size: 40rpx;
		color: rgba(123, 56, 0, 1);
		font-weight: 700;
		line-height: 47rpx;
	}

	.ranking_fd1_1_c1_c1 {
		margin: 20rpx 0rpx 12rpx 0rpx;
		color: rgba(51, 51, 51, 1);
		font-size: 24rpx;
		font-weight: 400;
		line-height: 33rpx;
	}

	.ranking_fd1_1_c1_c0_c1 {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
	}

	.ranking_fd1_1_c1_c0_c0 {
		width: 86rpx;
		height: 86rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: absolute;
		z-index: 10;
		bottom: 65rpx;
		left: 44rpx;
	}

	.ranking_fd1_1_c1_c0 {
		// background: var(--benbenbgColor1);
		// background-color: #fff !important;
		width: 112rpx;
		height: 112rpx;
		background-size: 100% auto;
		border-radius: 61rpx;
		margin: -52rpx 0rpx 0rpx 0rpx;
		position: relative;
	}

	.ranking_fd1_1_c1 {
		background: url(image-path('1624.png')) no-repeat;
		background-size: 100% auto;
		height: 269rpx;
		width: 243rpx;
	}

	.ranking_fd1_1_c0_c3_c1 {
		color: rgba(0, 53, 108, 1);
		font-size: 16rpx;
		font-weight: 400;
		line-height: 22rpx;
	}

	.ranking_fd1_1_c0_c3_c0 {
		font-size: 31rpx;
		color: rgba(0, 53, 108, 1);
		font-weight: 700;
		line-height: 36rpx;
	}

	.ranking_fd1_1_c0_c2 {
		width: 158rpx;
		height: 31rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 0rpx 0rpx 9rpx 0rpx;
	}

	.ranking_fd1_1_c0_c1 {
		margin: 10rpx 0rpx 8rpx 0rpx;
		color: rgba(51, 51, 51, 1);
		font-size: 24rpx;
		font-weight: 400;
		line-height: 33rpx;
	}
	.none{
		margin-top: 40rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 40rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	.ranking_fd1_1_c0_c0_c1 {
		width: 94rpx;
		height: 94rpx;
		border-radius: 50%;
	}

	.ranking_fd1_1_c0_c0_c0 {
		width: 78rpx;
		height: 78rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: absolute;
		z-index: 10;
		bottom: 65rpx;
		left: 44rpx;
	}

	.ranking_fd1_1_c0_c0 {
		// background: var(--benbenbgColor1);
		// background-color: #fff !important;
		width: 104rpx;
		height: 104rpx;
		background-size: 100% auto;
		border-radius: 52rpx;
		margin: -52rpx 0rpx 0rpx 0rpx;
		position: relative;
	}

	.ranking_fd1_1_c0 {
		background: url(image-path('1623.png')) no-repeat;
		background-size: 100% auto;
		height: 236rpx;
		width: 213rpx;
	}

	.ranking_fd1_1 {
		padding: 80rpx 0rpx 0rpx 0rpx;
		justify-content: space-around;
		// background-color: red;
	}

	.ranking_titleItemfd1_0_c0_c3_c0 {
		padding: 14rpx 40rpx 14rpx 40rpx;
	}

	.ranking_titlefd1_0_c0_c3 {
		border-radius: 40rpx;
		margin-top: 0 !important;
	}

	.ranking_linefd1_0_c0 {
		background: #ffffff;
		width: 100rpx;
		height: 8rpx;
		top: 80rpx;
		background-size: 100% auto !important;
	}

	.checkTitlefd1_0_c0 {
		font-weight: 700 !important;
		font-size: 28rpx !important;
		color: #FFFFFF !important;
		background-color: #145EFD !important;
	}



	#benben_tabsfd1_0_c0-line {
		display: none !important;
	}

	.ranking_fd1_0 {
		margin: 0rpx 0rpx 24rpx 0rpx;
	}

	.ranking_flex_2 {
		padding: 0 24rpx 0rpx 24rpx;
		position: absolute;
		width: 100%;
		top: 500rpx;
		height: calc(100vh - 770rpx);
		overflow: hidden;
	}
	.nones{
		color: #666666;
		width: 100%;
		text-align: center;
		justify-content: center;
	}
	.xian{
		margin: 0 22rpx;
		width: 32rpx;
		height: 2rpx;
		background: linear-gradient( 270deg, #666666 0%, rgba(102,102,102,0) 100%);
		border-radius: 0px 0px 0px 0px;
	}

	.ranking_fd2_1_c1_c0_c2 {
		color: #333;
		font-size: 28rpx;
		font-weight: 500;
	}

	.ranking_fd2_1_c1_c0_000 {
		font-size: 32rpx;
		color: rgba(20, 94, 253, 1) !important;
		margin: 0rpx 0rpx 0rpx 15rpx;
		font-weight: 700;
	}

	.ranking_fd2_1_c0_c1_c1 {
		color: rgba(253, 118, 46, 1);
		font-size: 28rpx;
		font-weight: 400;
		line-height: 28rpx;
		padding-right: 10rpx;
	}

	.ranking_fd2_1_c0_c1_c0 {
		color: rgba(102, 102, 102, 1);
		font-size: 28rpx;
		font-weight: 400;
		line-height: 28rpx;
	}

	.ranking_fd2_1_c0_c0_c2 {
		color: rgba(51, 51, 51, 1);
		font-weight: 500;
	}

	.ranking_fd2_1_c0_c0_c1 {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		margin: 0rpx 53rpx 0rpx 53rpx;
	}

	.ranking_fd2_1_c0_c0_c0 {
		font-size: 32rpx;
		color: rgba(153, 153, 153, 1);
		margin: 0rpx 0rpx 0rpx 15rpx;
		font-weight: 700;
	}

	.ranking_fd2_1_c0 {
		margin: 0rpx 0rpx 30rpx 0rpx;
		width: 100%;
		height: 100rpx;
	}

	.ranking_fd2_1 {
		height: calc(100% - 60rpx);
		overflow-y: auto;
	}

	.ranking_fd2_0_c2 {
		line-height: 40rpx;
		width: 200rpx;
		text-align: right;
	}

	.ranking_fd2_0_c0 {
		line-height: 40rpx;
	}

	.ranking_fd2_0 {
		height: 60rpx;
		margin: 20rpx 0rpx 20rpx 0rpx;
	}

	.ranking_flex_3 {
		width: 750rpx;
		height: 160rpx;
		overflow: hidden;
		z-index: 10;
		// bottom: calc(0rpx + var(--window-bottom));
		left: 0rpx;
	}

	.ranking_fd3_0_c0_c1_c2 {
		color: rgba(20, 94, 253, 1);
		font-size: 24rpx;
		font-weight: 700;
		line-height: 28rpx;
	}

	.ranking_fd3_0_c0_c1_c1 {
		color: rgba(20, 94, 253, 1);
		font-size: 40rpx;
		font-weight: 700;
		line-height: 28rpx;
	}

	.ranking_fd3_0_c0_c1_c0_c0 {
		color: rgba(20, 94, 253, 1);
		font-size: 28rpx;
		font-weight: 500;
		line-height: 28rpx;
	}

	.ranking_fd3_0_c0_c1_c0 {
		margin: 0rpx 64rpx 0rpx 0rpx;
	}

	.ranking_fd3_0_c0_c0_c2 {
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-weight: 500;
		max-width: 200rpx;
	}

	.ranking_fd3_0_c0_c0_c1 {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		margin: 0rpx 24rpx 0rpx 24rpx;
	}

	.ranking_fd3_0_c0_c0_c0 {
		font-size: 32rpx;
		color: rgba(51, 51, 51, 1);
		margin: 0rpx 0rpx 0rpx 15rpx;
		font-weight: 700;
	}

	.ranking_fd3_0_c0 {
		width: 100%;
		height: 160rpx;
		padding: 0rpx 40rpx 0rpx 40rpx;
	}

	.ranking_fd3_0 {
		background: url(image-path('1632.png')) no-repeat;
		margin: 0rpx 24rpx 0rpx 24rpx;
		// height: 130rpx;
		background-size: 100% auto;
	}

	.ranking_flex_4 {
		margin: 300rpx 0rpx 0rpx 0rpx;
	}

	.ranking_fd4_1 {
		background: #ffffff;
		width: 750rpx;
		--range-bg-color: rgba(41, 121, 255, 0.13);
		--active-bg-color: rgba(41, 121, 255, 1);
	}

	.ranking_fd4_0_c2 {
		color: rgba(20, 94, 253, 1);
		font-size: 32rpx;
		font-weight: 500;
	}

	.ranking_fd4_0_c1 {
		font-size: 36rpx;
		color: #333;
		font-weight: 500;
	}

	.ranking_fd4_0_c0 {
		color: rgba(191, 191, 191, 1);
		font-size: 32rpx;
		font-weight: 500;
	}

	.ranking_fd4_0 {
		// background: var(--benbenbgColor1);
		background-color: #fff !important;
		width: 100%;
		height: 122rpx;
		background-size: 100% auto;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	::v-deep .ranking_benbenTabsfd1_0_c0_99 {
		background: #fff !important;
		width: 640rpx;
		height: 88rpx;
		white-space: nowrap;
		text-align: center;
		border-radius: 44rpx;
	}
</style>